import React from 'react'
import { Menu, Icon } from 'antd';
import menuList from '../../config/meunConfig'
import './index.less'
const SubMenu = Menu.SubMenu
import logo from '../../resource/assets/logo-ant.svg'
export default class NavLeft extends React.Component {
    state = {
        menuTreeNode: ''
    }
    componentWillMount() {
        const menuTreeNode = this.rederMenu(menuList);
        this.setState({
            menuTreeNode: menuTreeNode
        })
      
    }
    //菜单渲染
    rederMenu = (data) => {
        return data.map((item)=>{
            if(item.children){
                return (
                    <SubMenu title={item.title} key={item.key}>
                        { this.rederMenu(item.children)}
                    </SubMenu>
                )
            }
            return <Menu.Item title={item.title} key={item.key}>
               {item.title}
            </Menu.Item>
        })
    }
    render() {
        return (
            <div>
                <div className="logo">
                    <img src={logo} alt="" />
                    <h1>Imooc MS</h1>
                </div>
                <Menu theme="dark">
                    {this.state.menuTreeNode}
                </Menu>
            </div>

        )
    }
}